<template>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="入门示例" name="first">
            <div ref="firstECharts"></div>
        </el-tab-pane>
        <el-tab-pane label="折线图" name="second">
            <div ref="secondECharts"></div>
        </el-tab-pane>
        <el-tab-pane label="多个图表" name="third">
            <div ref="thirdECharts"></div>
        </el-tab-pane>
        <el-tab-pane label="数据集使用" name="fourth">
            <div ref="fourthECharts"></div>
        </el-tab-pane>
        <el-tab-pane label="组件的使用" name="fiveth">
            <div ref="fivethECharts"></div>
        </el-tab-pane>
        <el-tab-pane label="散点图" name="sixth">
            <div ref="sixthECharts"></div>
        </el-tab-pane>
        <el-tab-pane label="多坐标体系" name="seventh">
            <div ref="seventhECharts"></div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'EchartsInfo',
    data() {
        return {
            activeName: 'first',
        }
    },
    methods: {
        handleClick(tab, event) {
            eval(`this.${this.activeName}ECharts()`);
        },
        firstECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            var myChart = echarts.init(curDom);
            myChart.setOption({
                title: {
                    text: 'ECharts 入门示例',
                    subtext: "echarts基本使用", // 子标题
                    textStyle: { //文字颜色 
                        color: 'cyan'
                    },
                    left: 'center' //设置标题位置
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {
                    axisLine: { //显示Y轴的线
                        show: true
                    },
                    axisTick: {   //显示Y轴刻度
                        show: true
                    }
                },
                series: [
                    {
                        name: '销量',
                        type: 'bar',  //表示柱状图
                        data: [5, 20, 36, 10, 10, 20],
                        color: 'green'
                    }
                ]
            });
        },
        secondECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            let myChart = echarts.init(curDom);
            myChart.setOption({
                title: {
                    text: '数据可视化-折线图 ',
                    textStyle: {
                        color: 'cyan'
                    },
                    left: 'center'
                },
                xAxis: {
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
                },
                yAxis: {},
                series: [
                    {
                        type: 'line',  //表示折线图
                        data: [10, 20, 15, 44, 2, 19, 90],
                        color: 'cyan'
                    }
                ]

            });
        },
        thirdECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            let myChart = echarts.init(curDom);
            myChart.setOption({
                title: {
                    text: '多个图形',
                    left: 'center'
                },
                xAxis: {
                    data: ["衣服", '直播', '游戏', '电影']
                },
                yAxis: {},
                series: [
                    {
                        type: "bar",  //图表的数据 bar柱状图  line折线图 pie饼图
                        data: [10, 20, 30, 40],
                        color: 'red'
                    },
                    {
                        type: "line",  //图表的数据 bar柱状图  line折线图 pie饼图
                        data: [12, 23, 44, 41],
                        color: 'green'
                    },
                    {
                        type: 'pie',
                        //饼图你可以显示文字，data写法如下
                        data: [{ name: '衣服', value: 10 }, { name: '直播', value: 20 }, { name: '游戏', value: 30 }, { name: '电影', value: 40 }],
                        //饼图的宽度与高度
                        width: 280,
                        height: 280,
                        //饼图位置
                        left: 100,
                        top: 20,
                        //饼图的半径
                        radius: 66
                    }
                ],
            });
        },
        fourthECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            let myChart = echarts.init(curDom);
            let data = [
                ["衣服", 10, 22, 'x', 10],
                ["直播", 12, 55, 'y', 60],
                ["游戏", 16, 44, 'z', 50],
                ["电影", 19, 32, 't', 70],
            ]
            myChart.setOption({
                title: {
                    text: '数据集的使用',
                    left: 'center'
                },
                dataset: {//数据源
                    source: data
                },
                xAxis: {
                    data: ["衣服", '直播', '游戏', '电影']
                },
                yAxis: {},
                series: [
                    {

                        type: "bar",  //图表的数据 bar柱状图  line折线图 pie饼图
                        color: 'red',
                        encdoe: {
                            y: 1  //数据集中下标为1的数据
                        }
                    },
                    {
                        type: 'line',
                        color: 'pink',
                        encode: {
                            y: 2
                        }
                    },
                    {
                        type: 'pie',
                        width: 450,
                        height: 450,
                        left: 180,
                        top: 50,
                        radius: 50, //半径
                        encode: {
                            itemName: 3,  //数据集中下标为3的数据
                            value: 4
                        }
                    }
                ]

            });
        },
        fivethECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            let myChart = echarts.init(curDom);
            myChart.setOption({
                title: {
                    text: 'ECharts组件使用',
                    left: 'left'
                },
                xAxis: {
                    data: ['游戏', '电影', "直播", '娱乐']
                },
                yAxis: {
                    axisLine: { //显示Y轴的线
                        show: true
                    },
                    axisTick: {   //显示Y轴刻度
                        show: true
                    }
                },
                series: [
                    {
                        name: "柱状图",
                        type: "bar",
                        data: [20, 30, 40, 50]
                    }
                    ,
                    {
                        name: "折线图",
                        type: 'line',
                        data: [30, 40, 50, 60]
                    }
                ],
                tooltip: {  //提示组件
                    //提示框文字的颜色
                    textStyle: {
                        color: 'red'
                    }
                },
                legend: { //系列切换组件
                    data: ['柱状图', '折线图']
                },
                toolbox: { //工具栏组件
                    show: true,
                    right: 50,
                    feature: {
                        saveAsImage: {},
                        dataZoom: {
                            yAxisIndex: "none"
                        },
                        dataView: {
                            readOnly: false
                        },
                        magicType: {
                            type: ["line", "bar"]
                        },
                        restore: {},

                    }
                },
                grid: { //调整图标布局
                    left: 30,
                    right: 30,
                }

            });
        },
        sixthECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            let myChart = echarts.init(curDom);
            myChart.setOption({
                title: {
                    text: '散点图',
                    left: 'center'
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [
                    {
                        type: "scatter",
                        //散点图的数据
                        data: [
                            [10, 20],
                            [13, 66],
                            [50, 9],
                            [44, 22],
                            [15, 10]
                        ]
                    }
                ]

            });
        },
        seventhECharts() {
            let curDom = this.$refs[`${this.activeName}ECharts`]
            echarts.dispose(curDom);
            let myChart = echarts.init(curDom);
            myChart.setOption({
                title: {
                    text: 'Y轴双坐标',
                    left: 'center'
                },
                xAxis: {
                    data: ['游戏', '直播', '经济', '娱乐']
                },
                yAxis: [
                    {  //显示Y轴的线
                        axisLine: {
                            show: true
                        },
                        //显示Y轴刻度
                        axisTick: {
                            show: true
                        }
                    },
                    {
                        //显示Y轴的线
                        axisLine: {
                            show: true
                        },
                        //显示Y轴刻度
                        axisTick: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        data: [10, 20, 30, 40],
                        //用的是索引值为0的y轴
                        yAxisIndex: 1
                    }
                    ,
                    {
                        type: 'bar',
                        data: [6, 10, 80, 20],
                        //用的是索引值为1y轴
                        yAxisIndex: 0
                    }
                ]
            });
        },


    },
    mounted() {
        this.firstECharts();
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

div {
    width: 880px;
    height: 550px;
}
</style>